<template>
  <div class="home">
    <el-container class="container">
      <el-header>
        <el-header>
          <div class="header_div">
            <img src="../assets/logo2.jpg" />
            <div class="header_btn">
              <el-button>消息</el-button>
              <el-button>设置</el-button >
              <el-button>安全退出</el-button>
            </div>
          </div>
        </el-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
        <p class="username">当前用户：{{username}}</p>
          <el-menu @select="select" router unique-opened :default-active="activeItem" class="el-menu-vertical-demo">
            <!-- 一级菜单 -->
            <el-submenu :index="v.id + ''" v-for="(v, index) in menusList" :key="v.id">
              <template slot="title">
                <i :class="icons[index]"></i>
                <span class="icon_title">{{ v.authName }}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item :index="item.path" v-for="item in v.children" :key="item.id">{{
                item.authName
              }}</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
         
          <!-- 路由视图 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      menusList: [],
      username:"",
      activeItem:"users",
      icons: [
        "iconfont icon-user",
        "iconfont icon-quanxian",
        "iconfont icon-shangpin",
        "iconfont icon-dingdan",
        "iconfont icon-shuju",
      ],
      
    };
  },
  methods: {
    //保存选中状态
    select(a){
      console.log(a);
      sessionStorage.setItem("activeItem",a);
    },
    //获取导航菜单
    async getMenus() {
      var p1 = await this.axios.get("menus");
      // console.log(p1);
      this.menusList = p1.data.data;
    },
  },
  mounted() {
    this.username=sessionStorage.getItem("uname")
    this.getMenus();
    //重新获取状态值
    this.activeItem = sessionStorage.getItem("activeItem")||"users";
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  .container {
    height: 100%;
    .icon_title {
      margin-left: 10px;
    }
    .username{
      text-align:center;
      padding:5px 5px;
    }
    .header_div {
      display: flex;
      justify-content: space-between;
      height: 100%;
      align-items: center;
    }
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 199px;
    min-height: 400px;
    height: 90%;
  }

  .el-header {
    background-color: #0097da;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    height: 100%;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;


  }
}
</style>
